<template>
  <v-overlay :modelValue="modelValue" persistent>
    <v-card class="px-6 py-3 skin-dialog">
      <v-card-title class="text-h5 text-white d-flex justify-space-between">
        选择饰品
        <i class="el-icon-close cursor-pointer" style="font-size: 22px" @click="handleClose"></i>
      </v-card-title>

      <v-row align="center" justify="space-between" class="my-3">
        <!-- 价格 -->
        <v-col
          cols="12"
          sm="6"
          class="text-white price-range d-flex justify-spacebetween align-center"
        >
          <i
            class="el-icon-sort mr-3 cursor-pointer"
            @click="handleChangeSort"
          >{{ query.desc === "true" ? '降序' : '升序' }}</i>

          <span
            v-for="(price, index) in price_range"
            :key="index"
            :class="{ active: index === rangeIndex }"
            @click="handleClickPrice(index)"
          >{{ index === 0 ? '全部' : !price[1] ? price[0] + '+' : price[0] + '-' + price[1] }}</span>
        </v-col>

        <!-- 搜索 -->
        <v-col cols="12" md="3">
          <el-input
            placeholder="请输入名称"
            size="small"
            clearable
            v-model="query.keyword"
            @keydown.enter="handleSearch"
          >
            <template #suffix>
              <i class="el-icon-search mr-2 cursor-pointer" @click="handleSearch"></i>
            </template>
          </el-input>
        </v-col>
      </v-row>

      <v-row class="skin-list" v-loading="loading">
        <v-col
          cols="6"
          sm="4"
          v-for="item in listData"
          :key="item.id"
          @click="handleClickSkin(item)"
        >
          <div
            class="skin-item px-3 py-2"
            :class="{ active: selectSkin && selectSkin.id === item.id }"
          >
            <div class="skin-exterior-name">{{ item.exterior_name }}</div>
            <div class="text-center my-1 image-box">
              <img :src="item.image_url" />
            </div>

            <div class="skin-short-name text-center">{{ item.short_name }}</div>
            <div class="skin-price text-center">
              {{ item.price }}
              <img src="@/static/img/icon/diamonds.png" class="diamond" />
            </div>

            <i class="el-icon-success" style="font-size: 28px; color: rgb(157, 126, 255)"></i>
          </div>
        </v-col>

        <span class="text-h5 text-white no-data" v-if="!listData.length && !loading">暂无数据</span>
      </v-row>

      <v-row justify="center" class="my-3">
        <el-pagination
          :page-size="query.page_size"
          :total="total"
          v-model:current-page="query.page"
          @current-change="fetch"
          hide-on-single-page
          style="max-width: 96%"
          layout="prev,pager,next"
          :small="isMobile"
        ></el-pagination>
      </v-row>

      <div class="d-flex justify-center">
        <v-btn color="#9D7EFF" class="text-white" :disabled="!selectSkin" @click="submit">确定</v-btn>
      </div>
    </v-card>
  </v-overlay>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from "vue";
import TopService from "@/services/TopService";
import type { SkinItem } from "../index.vue";

export default defineComponent({
  setup(props, { attrs, emit }) {
    const makeState = () => {
      return {
        query: {
          page_size: 6,
          page: 1,
          keyword: "",
          desc: "true"
        },

        listData: [] as SkinItem[],
        total: 0,
        loading: false,
        rangeIndex: 0,
        selectSkin: null as null | SkinItem,
      }
    }

    let state = reactive(makeState());

    watch(() => props.modelValue, () => {
      if (props.modelValue) {
        const newState = makeState();
        for (const key in newState) {
          state[key] = newState[key];
        }
        fetch();
      }
    })

    const price_range = [0, [10, 50], [50, 300], [300, 1000], [1000]];

    const fetch = () => {
      state.loading = true;

      let min_price = "";
      let max_price = "";
      const { rangeIndex } = state;

      if (rangeIndex) {
        min_price = price_range[rangeIndex][0];
        max_price = price_range[rangeIndex][1] || 999999;
      }

      TopService.getUpgradeSkinList({
        ...state.query,
        min_price,
        max_price,
      }).then(response => {
        const { list, total } = response.data.data
        state.total = total;
        state.listData = list;
      }).finally(() => state.loading = false)
    }

    return {
      ...toRefs(state),
      price_range,

      handleClickPrice(index: number) {
        if (state.rangeIndex !== index) {
          state.rangeIndex = index;
        }
        state.query.page = 1;
        fetch();
      },
      handleSearch() {
        state.query.page = 1;
        fetch();
      },
      handleClickSkin(skin: SkinItem) {
        const { selectSkin } = state;
        if (selectSkin) {
          if (skin.id === selectSkin.id) {
            state.selectSkin = null;
            return;
          }
        }
        state.selectSkin = skin;
      },
      handleClose() {
        emit("update:model-value", false);
      },
      submit() {
        emit("submit", state.selectSkin);
      },
      handleChangeSort() {
        console.log(state.query.desc);
        const desc = state.query.desc === "true" ? "false" : "true";
        state.query.desc = desc;
        fetch();
      },
      fetch,

      isMobile: window.screen.width <= 600,
    }
  },

  props: {
    modelValue: {
      type: Boolean,
      default: false,
    }
  }
})
</script>

<style>
.skin-dialog .el-loading-mask {
  background-color: rgb(53, 53, 59, 0.3) !important;
}
</style>
<style scoped lang="scss">
.skin-dialog {
  width: 100vw;
  max-width: 800px;
  background: #36363c;
  max-height: 80%;
}

.skin-list {
  height: 400px;
  overflow-y: auto;
  position: relative;

  .no-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
  }
}

.skin-item {
  height: 176px;
  position: relative;
  font-size: 14px;
  background: rgba(26, 26, 27, 0.6);
  cursor: pointer;

  &:hover,
  &.active {
    background: rgba(26, 26, 27, 1);
  }

  &.active {
    .el-icon-success {
      display: inline;
    }
  }

  .el-icon-success {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .skin-exterior-name {
    color: #989898;
  }

  .skin-short-name {
    color: #fff;
  }

  .skin-price {
    color: rgb(129, 118, 202);
    .diamond {
        position: relative;
        top: 0.085rem;
        width: 0.95rem;
        height: 0.95rem;
      }
  }

  img {
    width: 60%;
  }
}

.price-range {
  font-size: 13px;

  span {
    margin-right: 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    padding-bottom: 3px;

    &:last-child {
      margin-right: 0;
    }

    &.active {
      color: rgb(157, 126, 255);
      border-bottom-color: rgb(157, 126, 255);
    }
  }
}
.image-box{
	position: relative;
	height: 0;
	overflow: hidden;
	padding-bottom: 44%;
}
.image-box img{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

@media screen and (max-width: 768px) {
  .skin-list {
    height: 300px!important;
  }
}
</style>
